<template>
  <div class="stu-management">
    <h1>学员管理</h1>
    
    <!-- 搜索区域 -->
    <div class="container">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="姓名">
          <el-input v-model="searchForm.name" placeholder="请输入学生姓名" />
        </el-form-item>
        <el-form-item label="最高学历">
          <el-select v-model="searchForm.degree" placeholder="请选择">
            <el-option label="初中" value="1" />
            <el-option label="高中" value="2" />
            <el-option label="大专" value="3" />
            <el-option label="本科" value="4" />
            <el-option label="硕士" value="5" />
            <el-option label="博士" value="6" />
          </el-select>
        </el-form-item>
        <el-form-item label="所属班级">
          <el-select v-model="searchForm.clazzId" placeholder="请选择">
              <!-- 动态渲染班级选项 -->
            <el-option v-for="clazz in clazzList" :key="clazz.id" :label="clazz.name" :value="clazz.id.toString()" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button type="info" @click="handleReset">清空</el-button>
        </el-form-item>
      </el-form>
    </div>
    
    <!-- 操作按钮区域 -->
    <div class="container">
      <el-button type="success" @click="showAddModal">新增学员</el-button>
      <el-button type="danger" style="margin-left: 10px;" @click="handleBatchDelete">批量删除</el-button>
    </div>
    
    <!-- 表格区域 -->
    <div class="container">
      <el-table :data="studentsData" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="姓名" width="100" />
        <el-table-column prop="studentId" label="学号" width="120" />
        <el-table-column prop="clazz" label="班级" width="150" />
        <el-table-column prop="gender" label="性别" width="80" />
        <el-table-column prop="phone" label="手机号" width="150" />
        <el-table-column prop="education" label="最高学历" width="100" />
        <el-table-column prop="violationCount" label="违纪次数" width="100" />
        <el-table-column prop="violationScore" label="违纪扣分" width="100" />
        <el-table-column prop="lastModified" label="最后修改时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="showEditModal(scope.row.id)">编辑</el-button>
            <el-button type="warning" size="small" style="margin-left: 5px;" @click="showViolationDialog(scope.row.id)">违纪</el-button>
            <el-button type="danger" size="small" style="margin-left: 5px;" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 分页区域 -->
    <div class="container">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[5, 10, 20, 30, 50, 75, 100]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

  <!-- 新增/编辑学员对话框 -->
  <el-dialog
    v-model="addModalVisible"
    :title="dialogTitle"
    width="700px"
    @close="handleCloseModal"
  >
    <el-form
      ref="addFormRef"
      :model="addForm"
      :rules="addFormRules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div style="display: flex; flex-wrap: wrap;">
        <el-form-item label="姓名" prop="name" style="width: 48%; margin-right: 2%;">
          <el-input v-model="addForm.name" placeholder="请输入学员姓名" />
        </el-form-item>
        <el-form-item label="学号" prop="no" style="width: 48%;">
          <el-input v-model="addForm.no" placeholder="请输入学员学号" />
        </el-form-item>
        
        <el-form-item label="性别" prop="gender" style="width: 48%; margin-right: 2%;">
          <el-select v-model="addForm.gender" placeholder="请选择">
            <el-option label="男" value="1" />
            <el-option label="女" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" prop="phone" style="width: 48%;">
          <el-input v-model="addForm.phone" placeholder="请输入手机号" />
        </el-form-item>
        
        <el-form-item label="身份证号" prop="idCard" style="width: 48%; margin-right: 2%;">
          <el-input v-model="addForm.idCard" placeholder="请输入身份证号" />
        </el-form-item>
        <el-form-item label="是否院校" prop="isCollege" style="width: 48%;">
          <el-select v-model="addForm.isCollege" placeholder="请选择">
            <el-option label="是" value="1" />
            <el-option label="否" value="0" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="联系地址" prop="address" style="width: 48%; margin-right: 2%;">
          <el-input v-model="addForm.address" placeholder="请输入联系地址" />
        </el-form-item>
        <el-form-item label="最高学历" prop="degree" style="width: 48%;">
          <el-select v-model="addForm.degree" placeholder="请选择">
            <el-option label="初中" value="1" />
            <el-option label="高中" value="2" />
            <el-option label="大专" value="3" />
            <el-option label="本科" value="4" />
            <el-option label="硕士" value="5" />
            <el-option label="博士" value="6" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="毕业时间" prop="graduationDate" style="width: 48%; margin-right: 2%;">
          <el-date-picker
            v-model="addForm.graduationDate"
            type="date"
            placeholder="请选择毕业时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="所属班级" prop="clazzId" style="width: 48%;">
          <el-select v-model="addForm.clazzId" placeholder="请选择">
            <!-- 动态渲染班级选项 -->
            <el-option v-for="clazz in clazzList" :key="clazz.id" :label="clazz.name" :value="clazz.id.toString()" />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    
    <template #footer>
      <el-button @click="handleCloseModal">取消</el-button>
      <el-button type="primary" @click="handleAdd">保存</el-button>
    </template>
  </el-dialog>

  <!-- 违纪处理对话框 -->
  <el-dialog
    v-model="violationDialogVisible"
    title="学员违纪处理"
    width="400px"
    :before-close="handleViolationDialogClose"
  >
    <div style="padding: 20px 0;">
      <!-- 扣分数值输入框 -->
      <el-form-item label="扣分数值" label-width="100px">
        <el-input
          v-model="violationScore"
          type="number"
          placeholder="请输入扣分数（正整数）"
          min="1"
          @input="validateViolationScore"
          style="width: 200px;"
        />
        <!-- 校验错误提示 -->
        <div v-if="scoreInputError" style="color: #f56c6c; font-size: 12px; margin-top: 5px;">
          {{ scoreInputError }}
        </div>
      </el-form-item>
    </div>

    <!-- 对话框底部按钮 -->
    <template #footer>
      <el-button @click="violationDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="confirmViolationHandle">确认扣分</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox, ElTable, ElTableColumn, ElButton, ElInput, ElSelect, ElOption, ElForm, ElFormItem, ElPagination, ElDatePicker, ElDialog } from 'element-plus'
import { deleteStu, getStuList, addStu, getStuById, updateStu, handleStuViolation } from '@/api/stu.js'
import { getAllClazzList } from '@/api/clazz.js'

// 搜索表单数据（根据接口文档调整）
const searchForm = ref({
  name: '',
  degree: '', // 学历(1:初中,2:高中,3:大专,4:本科,5:硕士,6:博士)
  clazzId: '' // 班级ID
})

// 分页数据
const pagination = ref({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 班级列表（动态获取）
const clazzList = ref([])

// 选中的行数据
const multipleSelection = ref([])

// 违纪处理相关状态
// 1. 违纪对话框显示状态（默认隐藏）
const violationDialogVisible = ref(false)
// 2. 当前要处理违纪的学员 ID（点击"违纪"按钮时赋值）
const currentViolationStuId = ref(null)
// 3. 扣分数值（默认空，需校验为正数）
const violationScore = ref('')
// 4. 扣分输入框的校验状态（可选，优化用户体验）
const scoreInputError = ref('')

// 处理选择事件
const handleSelectionChange = (val) => {
  multipleSelection.value = val
  console.log('选中的行:', val)
}

// 表格数据
const studentsData = ref([])

// 学历映射
const degreeMap = {
  1: '初中',
  2: '高中',
  3: '大专',
  4: '本科',
  5: '硕士',
  6: '博士'
}

// 性别映射
const genderMap = {
  1: '男',
  2: '女'
}

// 获取学员列表
const fetchStudents = async () => {
      try {
        // 1. 分页参数名恢复为 page + pageSize（与文档一致）
        const params = {
          page: pagination.value.currentPage,   // 文档要求的"当前页"参数
          pageSize: pagination.value.pageSize   // 文档要求的"每页条数"参数
        }
        
        // 2. 筛选参数逻辑不变（只传有值的参数，避免空值干扰）
        if (searchForm.value.name && searchForm.value.name.trim()) {
          params.name = searchForm.value.name.trim()
        }
        if (searchForm.value.degree) {
          params.degree = searchForm.value.degree
        }
        if (searchForm.value.clazzId) {
          params.clazzId = searchForm.value.clazzId
        }

        // 调试：打印请求参数和路径，确认与文档一致
        console.log('请求路径:', '/students')
        console.log('请求参数:', params)
        
        const res = await getStuList(params)
        
        // 3. 验证后端返回格式（按文档响应样例判断）
        if (res.code === 1 && res.data && Array.isArray(res.data.rows)) {
          // 调试：确认后端返回的数据结构
          console.log('后端返回总条数:', res.data.total)
          console.log('后端返回当前页数据量:', res.data.rows.length)

          // 4. 数据映射（处理空值 + 格式化时间）
          studentsData.value = res.data.rows.map(student => ({
            id: student.id || '',
            name: student.name || '未知姓名',
            studentId: student.no || '未知学号',  // 文档中"学号"字段是 no
            clazz: student.clazzName || '未分配班级', // 文档中"班级名称"是 clazzName
            gender: genderMap[student.gender] || '未知性别', // 映射性别（1=男，2=女）
            phone: student.phone || '未填写',
            education: degreeMap[student.degree] || '未填写', // 映射学历
            violationCount: student.violationCount || 0, // 无违纪次数显示 0
            violationScore: student.violationScore || 0, // 无违纪扣分显示 0
            lastModified: student.updateTime
              ? new Date(student.updateTime).toLocaleString('zh-CN')
              : '未修改', // 格式化时间
            clazzId: student.clazzId || ''
          }))

          // 更新分页总条数（与文档中的 total 字段匹配）
          pagination.value.total = res.data.total || 0
        } else {
          // 明确提示后端返回异常（含具体信息）
          ElMessage.error(`获取学员列表失败：${res?.msg || '后端返回数据格式异常'}`)
        }
      } catch (error) {
        // 显示具体错误（如 404、网络错误）
        const errorMsg = error.response
          ? `状态码: ${error.response.status}，原因: ${error.response.statusText}`
          : error.message || '未知网络错误'
        console.error('获取学员列表异常:', error)
        ElMessage.error(`获取学员列表异常：${errorMsg}`)
      }
    }

// 处理搜索
const handleSearch = () => {
  pagination.value.currentPage = 1
  fetchStudents()
}

// 处理清空
const handleReset = () => {
  searchForm.value = {
    name: '',
    degree: '',
    clazzId: ''
  }
  pagination.value.currentPage = 1
  fetchStudents()
}

// 处理分页大小变化
const handleSizeChange = (size) => {
  pagination.value.pageSize = size
  fetchStudents()
}

// 处理页码变化
const handleCurrentChange = (current) => {
  pagination.value.currentPage = current
  fetchStudents()
}

// 组件挂载时获取数据

// 获取班级列表
const fetchClazzList = async () => {
  try {
    // 直接调用getAllClazzList获取班级数组
    const clazzData = await getAllClazzList()
    clazzList.value = clazzData || []
  } catch (error) {
    console.error('获取班级列表异常:', error)
    ElMessage.error('获取班级列表失败')
  }
}

onMounted(() => {
  fetchClazzList() // 组件挂载时获取班级列表
  fetchStudents()
})

// 新增学员相关数据
const addModalVisible = ref(false)
const dialogTitle = ref('新增学员')
const editId = ref(null)
const addFormRef = ref(null)
const addForm = ref({
  name: '',
  no: '',
  gender: '',
  phone: '',
  idCard: '',
  isCollege: '',
  address: '',
  degree: '',
  graduationDate: '',
  clazzId: ''
})

// 新增学员表单验证规则
const addFormRules = ref({
  name: [
    { required: true, message: '请输入学员姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '姓名长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  no: [
    { required: true, message: '请输入学员学号', trigger: 'blur' },
    { min: 8, max: 20, message: '学号长度在 8 到 20 个字符', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  idCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号码', trigger: 'blur' }
  ],
  isCollege: [
    { required: true, message: '请选择是否院校', trigger: 'change' }
  ]
})

// 显示新增学员对话框
const showAddModal = () => {
  dialogTitle.value = '新增学员'
  editId.value = null
  // 重置表单
  if (addFormRef.value) {
    addFormRef.value.resetFields()
  }
  addModalVisible.value = true
}

// 显示编辑学员对话框
const showEditModal = async (id) => {
  try {
    // 设置对话框标题和编辑ID
    dialogTitle.value = '修改学员'
    editId.value = id
    
    // 根据ID查询学员详情
    const res = await getStuById(id)
    
    if (res.code === 1 && res.data) {
      // 回显数据到表单
      addForm.value = {
        name: res.data.name || '',
        no: res.data.no || '',
        gender: res.data.gender !== undefined ? res.data.gender.toString() : '',
        phone: res.data.phone || '',
        idCard: res.data.idCard || '',
        isCollege: res.data.isCollege !== undefined ? res.data.isCollege.toString() : '',
        address: res.data.address || '',
        degree: res.data.degree !== undefined ? res.data.degree.toString() : '',
        graduationDate: res.data.graduationDate || '',
        clazzId: res.data.clazzId !== undefined ? res.data.clazzId.toString() : ''
      }
      
      // 显示对话框
      addModalVisible.value = true
    } else {
      ElMessage.error('获取学员详情失败')
    }
  } catch (error) {
    console.error('获取学员详情异常:', error)
    ElMessage.error('获取学员详情异常')
  }
}

// 关闭新增学员对话框
const handleCloseModal = () => {
      addModalVisible.value = false
      // 重置表单和编辑标识（关键修复）
      if (addFormRef.value) {
        addFormRef.value.resetFields()
      }
      editId.value = null // 重置编辑ID，防止新增时误判为编辑
    }

// 提交新增/编辑学员表单
const handleAdd = async () => {
  try {
    // 表单验证
    await addFormRef.value.validate()
    
    // 转换数值类型字段
    const submitData = {
      ...addForm.value,
      gender: parseInt(addForm.value.gender),
      isCollege: parseInt(addForm.value.isCollege),
      degree: addForm.value.degree ? parseInt(addForm.value.degree) : undefined,
      clazzId: addForm.value.clazzId ? parseInt(addForm.value.clazzId) : undefined
    }
    
    let res
    if (editId.value) {
      // 编辑操作 - 在data中包含id（关键修复）
      res = await updateStu({ ...submitData, id: editId.value })
    } else {
      // 新增操作
      res = await addStu(submitData)
    }
    
    if (res.code === 1) {
      ElMessage.success(editId.value ? '修改学员成功' : '新增学员成功')
      handleCloseModal()
      // 刷新学员列表
      fetchStudents()
    } else {
      ElMessage.error((editId.value ? '修改学员失败' : '新增学员失败') + ': ' + (res.msg || '未知错误'))
    }
  } catch (error) {
    if (error.name === 'Error') {
      // 表单验证失败
      return
    }
    console.error((editId.value ? '修改学员异常' : '新增学员异常') + ':', error)
    ElMessage.error(editId.value ? '修改学员异常' : '新增学员异常')
  }
}

// 显示违纪处理对话框
const showViolationDialog = (stuId) => {
  // 1. 赋值当前学员 ID
  currentViolationStuId.value = stuId
  // 2. 重置输入框和校验状态（避免残留上次数据）
  violationScore.value = ''
  scoreInputError.value = ''
  // 3. 显示对话框
  violationDialogVisible.value = true
}

// 对话框关闭前的重置（可选，防止数据残留）
const handleViolationDialogClose = () => {
  violationScore.value = ''
  scoreInputError.value = ''
}

// 校验扣分数值
const validateViolationScore = () => {
  const score = Number(violationScore.value)
  // 1. 校验为空
  if (!violationScore.value.trim()) {
    scoreInputError.value = '扣分数值不能为空'
    return false
  }
  // 2. 校验为正整数
  if (!Number.isInteger(score) || score < 1) {
    scoreInputError.value = '请输入大于 0 的正整数'
    return false
  }
  // 3. 校验通过
  scoreInputError.value = ''
  return true
}

// 确认违纪处理（调用接口）
const confirmViolationHandle = async () => {
  // 1. 前端预校验（不通过则终止）
  if (!validateViolationScore()) {
    return
  }

  // 2. 转换扣分数值为数字（输入框是字符串类型）
  const score = Number(violationScore.value)

  try {
    // 3. 调用后端违纪接口
    const res = await handleStuViolation(currentViolationStuId.value, score)

    // 4. 处理后端响应
    if (res.code === 1) {
      // 成功：提示 + 关闭对话框 + 刷新学员列表（更新违纪次数/分数）
      ElMessage.success('违纪处理成功！')
      violationDialogVisible.value = false
      fetchStudents() 
    } else {
      // 失败：提示后端返回的错误信息
      ElMessage.error(`违纪处理失败：${res.msg || '未知错误'}`)
    }
  } catch (error) {
    // 5. 处理网络异常（如接口不可达）
    const errorMsg = error.response?.data?.msg || error.message || '网络异常'
    ElMessage.error(`违纪处理异常：${errorMsg}`)
  }
}

// 单个删除学员
const handleDelete = (id) => {
  ElMessageBox.confirm(
    '确定要删除该学员吗？',
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    try {
      await deleteStu(id) // 传递主键id
      ElMessage.success('删除成功')
      fetchStudents() // 刷新列表（而非手动筛选）
    } catch (error) {
      const errorMsg = error.response?.data?.msg || error.message || '操作失败'
      ElMessage.error(`删除失败：${errorMsg}`)
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 批量删除学员
const handleBatchDelete = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请选择要删除的学员')
    return
  }
  
  console.log('当前选中项数量:', multipleSelection.value.length)
  console.log('当前选中项详情:', multipleSelection.value)
  
  ElMessageBox.confirm(
    `确定要删除选中的 ${multipleSelection.value.length} 名学员吗？`,
    '删除确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
    try {
      // 传递主键id数组（关键修复）
      const ids = multipleSelection.value.map(student => student.id)
      await deleteStu(ids) // 调用统一的删除接口
      
      ElMessage.success('批量删除成功')
      fetchStudents() // 刷新列表
      multipleSelection.value = [] // 清空选中状态
    } catch (error) {
      const errorMsg = error.response?.data?.msg || error.message || '操作失败'
      ElMessage.error(`批量删除失败：${errorMsg}`)
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
</script>

<style scoped>
.stu-management {
  padding: 20px;
}

.stu-management h1 {
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

.container {
  margin: 10px 0px;
}
</style>